<template>
  <div>
    <van-sticky>
      <!-- 头部导航栏 -->
      <NavTop>
        <template #left>
          <van-icon name="arrow-left animate__animated animate__fadeInLeft" @click="leftFn" />
        </template>
        <template #calendarbox2>
          <span>设置</span>
        </template>
      </NavTop>
    </van-sticky>
    <!-- 内容 -->
    <div class="box">
      <van-cell-group inset>
        <van-cell title="账号信息" :value="email" class="animate__animated animate__fadeInUp"  @click="toFn"/>
        <van-cell title="童年游戏" value="https://www.yikm.net/" class="animate__animated animate__fadeInUp" @click="toGameFn" />
        <van-cell title="联系CV高手作者 v♥" value="A_dogs_life" class="animate__animated animate__fadeInUp" @click="wxShowFn" />
      </van-cell-group>
      <transition enter-active-class="animate__animated animate__fadeInUp" leave-active-class="animate__animated animate__fadeOutDown">
        <div class="vxBox" v-show="wxShow">
          <img :src="this.imgUrl" alt="" />
        </div>
      </transition>
      <!-- <div class="vxBox animate__animated animate__fadeInUp" v-show="wxShow">
        <img :src="this.imgUrl" alt="">
      </div> -->
    </div>
  </div>
</template>
fadeOutDown
<script>
import NavTop from '@/components/home/homenNavTop.vue'

export default {
  data () {
    return {
      // 账号信息
      email: '',
      // 控制作者微信图片，显示
      wxShow: false,
      // 作者微信图片
      imgUrl: ''
    }
  },
  components: {
    NavTop
  },
  methods: {
    // 返回
    leftFn () {
      this.$router.replace('/home')
    },
    // 跳转个人信息
    toFn () {
      this.$router.replace('/useredit')
    },
    // 跳转去游戏
    toGameFn () {
      window.location.href = 'https://www.yikm.net/'
    },
    // 显示微信
    wxShowFn () {
      this.wxShow = !this.wxShow
    }
  },
  activated () {
    this.email = this.$store.state.userInfoData.email
    this.imgUrl =
      ''
  }
}
</script>

<style lang="less" scoped>
/deep/.van-sticky {
  width: 100%;
}
/deep/.calendarbox2 {
  padding: 12px !important;
  span {
    font-size: 16px !important;
  }
}
.box {
  padding: 60px 20px;
  /deep/[class*="van-hairline"]::after {
    border: 0;
  }
  .van-cell-group--inset {
    margin: 10px;
    .van-cell {
      padding: 15px 20px;
      box-shadow: 1px 1px 8px 0px #ededed;
      border: 0.2px solid #ededed;
      margin: 10px 0;
      border-radius: 10px;
      .van-cell__title {
        span {
          font-size: 14px;
          font-weight: 550;
        }
      }
      .van-cell__value {
        span {
          font-size: 12px;
          color: #969799;
        }
      }
    }
    .van-cell::after {
      border-bottom: 0;
    }
  }
  .vxBox {
    display: flex;
    justify-content: center;
    box-shadow: 0.02667rem 0.02667rem 0.21333rem 0 #ededed;
    border: 0.00533rem solid #ededed;
    margin: 10px;
    border-radius: 0.26667rem;
    padding: 20px;
    img {
      width: 80%;
    }
  }
}
</style>
